<template>
  <header>
    <nut-searchbar
      input-background="#fff"
      placeholder="请输入..."
      v-model="store.searchForm.title"
      @search="store.lessonSearch"
      @clear="store.lessonSearch"
    >
      <template #leftin>
        <Search2 />
      </template>
    </nut-searchbar>
    <nut-menu>
      <nut-menu-item
        v-model="store.searchForm.categoryId"
        :cols="2"
        :options="store.categoryOptions"
        @change="store.lessonSearch"
      />
      <nut-menu-item
        v-model="store.searchForm.sortOption"
        :options="store.sortOptions"
        @change="store.lessonSearch"
      />
    </nut-menu>
  </header>
  <nut-divider />
  <section class="hasMainbar">
    <nut-grid :column-num="2">
      <nut-grid-item v-for="(item, index) in store.lessons" :key="index">
        <LessonItemCard :data="item" />
      </nut-grid-item>
    </nut-grid>
    <nut-pagination
      v-if="store.pageInfo.total > store.pageInfo.limit"
      v-model="store.pageInfo.page"
      :total-items="store.pageInfo.total"
      :items-per-page="store.pageInfo.limit"
      @change="store.changePage"
    />
  </section>
  <MainBar :active="1" />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useLessonStore } from '@/stores/lesson'
import LessonItemCard from '@/components/lesson/index.vue'
import MainBar from '@/components/mainbar/index.vue'
import { Search2 } from '@nutui/icons-vue'

const store = useLessonStore()
onMounted(() => {
  store.getCategories()
  store.loadLessonList()
})
</script>
